<template>
  <div class="table_component">
    <div class="search_part">
      <el-select size="mini" placeholder="请选择质疑类型" v-model="questioningTypeValue">
        <el-option
          v-for="item in queryMethodOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-button style="margin: 0 12px" type="primary" size="mini" icon="el-icon-search" @click="handleSearch()"
        >查询</el-button
      >
      <el-button style="margin-right: 12px" size="mini" icon="el-icon-refresh" @click="handleReset()">重置</el-button>
    </div>
    <div class="table_part">
      <el-table :data="tableDataOfNoResponse" stripe :header-cell-style="{ background: 'rgba(117, 60, 202, 0.04)' }">
        <el-table-column align="center" label="质疑编号" prop="queryNumber"></el-table-column>
        <el-table-column align="center" label="状态" prop="status">
          <template v-slot="{ row }">
            {{ statusEnums[row.status] }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="受试者代码" prop="subjectCode"></el-table-column>
        <el-table-column align="center" label="质疑类型" prop="queryMethod">
          <template v-slot="{ row }">
            <span>
              {{ queryMethodOptionsEnums[row.queryMethod] }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="访视名称" prop="visitName"></el-table-column>
        <el-table-column align="center" label="表名称" prop="tableName">
          <template slot-scope="scope">
            <span class="table-column-text active-color" @click="tableTransfo(scope.row)">{{
                  scope.row.tableName
                }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="变量名" prop="variableName"></el-table-column>
        <el-table-column align="center" label="变量值" prop="variableValue"></el-table-column>
        <el-table-column align="center" label="质疑内容" prop="queryContent"></el-table-column>
        <el-table-column align="center" label="质疑人" prop="questioner"></el-table-column>
        <el-table-column align="center" label="质疑原因类型" prop="queryReasonType"></el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="margin-top: 12px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageParams.pageNo"
          :page-size="pageParams.pageSize"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next"
          :total="total"
        ></el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  props: {
    tableDataOfNoResponse: {
      type: Array,
      default: () => [],
    },
    total: {
      type: Number,
      default: null,
    },
    pageParams: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      questioningTypeValue: '',
      queryMethodOptions: [
        { label: '系统质疑', value: '0' },
        { label: '人工质疑', value: '1' },
      ],
      queryMethodOptionsEnums: {
        0: '系统质疑',
        1: '人工质疑',
      },
      statusEnums: {
        1: '未回复',
        2: '已回复',
        3: '已关闭',
      },
    }
  },
  methods: {
    ...mapMutations({
      clear: 'treatment/clear'
    }),
    // 点击搜索
    handleSearch() {
      this.$emit('handleSearch', this.questioningTypeValue)
    },
    // 点击重置
    handleReset() {
      this.questioningTypeValue = ''
      this.$emit('handleSearch', '')
    },
    // 改变页码
    handleCurrentChange(val) {
      this.$emit('handleCurrentChange', val)
    },
    // 改变页码尺寸
    handleSizeChange(val) {
      this.$emit('handleSizeChange', val)
    },
    // 跳转ecrf详情
    tableTransfo (row) {
      console.log(row)
      this.clear()
      this.$router.push({
        path: '/ecrf-detail',
        query: {
          id: row.subjectId,
          subjectTableId: row.subjectTableId,
          visitId:row.visitId
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.table_component {
  .table_part {
    margin-top: 24px;
  }
  .table-column-text {
    display: inline-block;
    cursor: pointer;
  }
  .active-color {
    color: rgb(117, 60, 202);
  }
}
</style>
